<template>
	<view>
		<view class="complaint-container">
			<view class="bg">
				<image src="../../static/service/answer01.png" style="width: 50%; height: 300rpx; margin-left: 50%;">
				</image>
			</view>
			<!-- 内容 -->
			<view class="content">
				<view class="types">
					<view class="types-top">
						<view class="choose-type">请选择类型</view>
						<image src="../../static/images/warn1.png" mode="" style="width: 25rpx; height: 25rpx;"
							class="warn-img"></image>
						<view class="know" @tap="showPopup">须知</view>
					</view>
			
					<van-popup :show="show" :closeable="true" closeable="true" position="center"
						custom-style="height: 40%; width: 70%; border-radius: 30rpx; padding: 30rpx 15rpx;"
						bind:close="onClose" round @close="closePopup">
						<view class="popup-title">须知</view>
						<view class="popup-item">1.您一天只能提交2次投诉建议，请谨慎操作。</view>
						<view class="popup-item">2.投诉或反馈一般3个工作日内给您受理，如有紧急问题，可直接联系人工客服。</view>
						<view class="popup-item">3.投诉反馈启用匿名提交方式，您的信息将严格保密，不会向外提供。</view>
						<view class="popup-item">4.您应该保证您的的投诉和反馈出于善意，恶意投诉将影响您在平台的信用。</view>
					</van-popup>
					<uni-list>
						<view v-for="(item, index) in title" :key="index" @click="toComplaintDetail(item)">
							<uni-list-item showArrow :title="item" class="item-title" />
						</view>
					</uni-list>
				</view>
				<view class="btn">
					<image src="../../static/service/answer04.png"></image>
					<image src="../../static/service/answer02.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: Array,
				default: ['产品建议', '假冒伪劣', '品牌欺诈', '价格欺诈', '虚假宣传', '以租赁形式从事贷款', '退换货问题']
			}
		},
		data() {
			return {
				show: false,
				round: true,
				title1: ['产品建议', '假冒伪劣', '品牌欺诈', '价格欺诈', '虚假宣传', '以租赁形式从事贷款', '退换货问题']
			}
		},
		onLoad() {
			this.width = uni.getSystemInfoSync().windowWidth - 20
		},
		methods: {
			toService() {
				uni.switchTab({
					url: '/pages/service/service'
				});
			},
			toComplaintDetail(item) {
				uni.navigateTo({
					url: `/pagesB/complaint/complaintDetail?type=${item}`
				});
			},
			toMyComplaint() {
				uni.navigateTo({
					url: '/pagesB/complaint/myComplaint'
				})
			},
			showPopup() {
				this.show = true
			},
			closePopup() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		background-image: linear-gradient(to right bottom, #f6706e, #ff7e63);
		padding: 0 30rpx;
		border-radius: 0 0 25% 25%;
	}

	.content {
		margin-top: -70rpx;
		padding: 3vh 5vw;
	}

	.tips {
		margin-bottom: 60rpx;
	}

	.image {
		width: 100%;
	}

	.warn-img {
		position: relative;
		left: 32%;
	}

	.types,
	.btn {
		border: 1px solid #fff;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 40rpx;
		margin: 0 auto;
		padding: 0 4vw 2vh 4vw;
	}

	.btn {
		padding: 2vh 4vw 2vh 4vw;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.btn image {
		width: 100rpx;
		height: 70rpx;
	}

	.types-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		line-height: 3rem;
	}

	.know {
		font-size: 25prx;
	}

	.choose-type {
		font-size: 30rpx;
		font-weight: 800;
	}

	.item-title {
		font-size: 30rpx;

		&:after {
			content: '';
			width: 3rpx;
			height: 3rpx;
			background-color: red;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 30rpx;
	}

	.popup-item {
		color: #8f8f8f;
		line-height: 1.5rem;
		font-size: 20rpx;
		margin-top: 20rpx;
	}

	.content {
		font-size: 20rpx;
	}
</style>
